import React, { Component } from 'react';
import Child  from './components/Child carr';

class App extends Component {

    arr = [
        {
            username:'小山',
            password:'12345',
            age: '16'
        },
        {
            username:'大山',
            password:'12345',
            age: '18'
        }
    ]
    state = {

    //     all: false,
    //     lessons:[

    // ],

        username: {
            value: '',
            onChange: e => this.setState(state => ({ username: { ...state.username,value: e.target.value} })),
        },
        password: {
            value: '',
            onChange: e => this.setState(state => ({ password: { ...state.password,value: e.target.value} })),
        },
        age: {
            value: '',
            onChange: e => this.setState(state => ({ age: { ...state.age,value: e.target.value} })),
        },
    }
    // componentDidMount() {
    //     // 判断localStorage是否存在
    //     console.log(1);
    //     const list = localStorage.getItem("arr");

    //     if (list && list.length !== 0) {
    //         this.setState({
    //         arr:list.split(",")
    //         })
    //     }
    //     }

    addItem = () => {
        // console.log(this.state.age.value );
        const { username,password,age } = this.state
        // 非空验证
        if (!username.value || !password.value || !age.value) return alert('请完整填写')
        // 验证账号是否重复
        if(this.arr.some(i => i.username === username.value)) return alert("账号重复")
        // 判断密码长度
        if(password.value.length < 3 || password.value.length > 5) return alert('密码长度3-5')
        // 验证年龄
        if(age.value < 1 || age.value > 200) return alert('年龄1-200')
        let obj = {
            username:username.value,
            password:password.value,
            age:age.value,
        }
        this.arr.push(obj)
        this.forceUpdate()
        this.setState({ username: { ...this.state.username, value: '' } })
        this.setState({ password: { ...this.state.password, value: '' } })
        this.setState({ age: { ...this.state.age, value: '' } })
        this.setState({
            arr: [...this.arr,obj]
        })
        // localStorage.setItem('name', [...this.state.todolist,this.state.inputValue])
        // localStorage.setItem('todolist', [...this.state.todolist,this.state.inputValue])
        // localStorage.setItem('todolist', [...this.state.todolist,this.state.inputValue])
    }
    render() {
        return (
            <div
            style={{
                    width:'835px',
                    height:'400px',
                    background:'rgb(134, 130, 130)',
                    margin:'0 auto',
                }}
            >
                <div
                style={{
                    width:'250px',
                    height:'400px',
                    background:'rgb(231, 230, 230)',
                    float:'left'
                }}
                >
                    <ul
                    style={{
                        listStyle:'none',
                        textAlign: 'center',
                        margin:'0 auto'
                    }}
                    >
                        <li
                        style={{
                            margin:'50px 20px 0 20px'
                        }}
                        >
                            账号<input type="text"
                            style={{
                                width:'150px',
                                height:'30px',
                            }}
                            {...this.state.username}
                    /></li>
                        <li
                        style={{
                            margin:'50px 20px 0 20px'
                        }}
                        >
                            密码<input type="text"
                            style={{
                                width:'150px',
                                height:'30px',
                            }}
                            {...this.state.password}
                    /></li>
                        <li
                        style={{
                            margin:'50px 20px 0 20px'
                        }}
                        >
                            年龄<input type="text"
                            style={{
                                width:'150px',
                                height:'30px',
                    }}
                    {...this.state.age}
                    /></li>
                    </ul>
                    <button
                    style={{
                        width:'50px',
                        height:'30px',
                        float:'right',
                        marginTop:'30px',
                        marginRight:'10px'
                    }}
                    onClick={this.addItem}
                    >添加</button>
                </div>
            <Child
            arr={this.arr}
            />
            </div>
        );
    }
}

export default App;
